<!DOCTYPE html>
<html>
<head>
<title>Diagram of a Charged Sphere with Dielectric Shell</title>
</head>
<body>

<canvas id="physics-diagram" width="500" height="450"></canvas>

<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const cx = 250;
    const cy = 200;
    const R = 90;        // Inner radius
    const R_prime = 150; // Outer radius
    const line_color = 'black';
    const fill_color = '#E0E0E0'; // Light gray for the sphere
    const text_color = 'black';
    const line_width = 2;

    // --- Drawing Functions ---

    /**
     * Draws the main structure: the inner sphere and the outer shell boundary.
     */
    function drawStructure() {
        // Outer circle (shell boundary)
        ctx.beginPath();
        ctx.arc(cx, cy, R_prime, 0, 2 * Math.PI);
        ctx.lineWidth = line_width;
        ctx.strokeStyle = line_color;
        ctx.stroke();

        // Inner sphere
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        
        // Fill the inner sphere
        ctx.fillStyle = fill_color;
        ctx.fill();
        
        // Stroke the inner sphere boundary
        ctx.lineWidth = line_width;
        ctx.strokeStyle = line_color;
        ctx.stroke();
    }

    /**
     * Draws the positive charges distributed on the inner sphere.
     */
    function drawCharges() {
        ctx.font = '20px Arial';
        ctx.fillStyle = text_color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const numCharges = 12;
        const chargeRadius = R - 12; // Place charges slightly inside the boundary

        for (let i = 0; i < numCharges; i++) {
            const angle = (i / numCharges) * 2 * Math.PI;
            const x = cx + chargeRadius * Math.cos(angle);
            const y = cy + chargeRadius * Math.sin(angle);
            ctx.fillText('+', x, y);
        }
    }

    /**
     * Draws the radial lines and their corresponding labels, R and R'.
     */
    function drawRadiiAndLabels() {
        // Angles for the lines in radians (0 is right, increases counter-clockwise)
        const angleR = -45 * Math.PI / 180;       // Angle for the R line
        const angleR_prime = -20 * Math.PI / 180; // Angle for the R' line
        
        ctx.lineWidth = line_width;
        ctx.strokeStyle = line_color;

        // Line for radius R
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R * Math.cos(angleR), cy + R * Math.sin(angleR));
        ctx.stroke();

        // Line for radius R'
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R_prime * Math.cos(angleR_prime), cy + R_prime * Math.sin(angleR_prime));
        ctx.stroke();

        // Labels R and R'
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillStyle = text_color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Position for 'R' label, placed within the sector
        const labelR_x = cx + R * 0.55 * Math.cos(angleR + 0.25);
        const labelR_y = cy + R * 0.55 * Math.sin(angleR + 0.25);
        ctx.fillText('R', labelR_x, labelR_y);

        // Position for 'R'' label, placed within the sector
        const labelRp_x = cx + R * 0.8 * Math.cos(angleR_prime - 0.25);
        const labelRp_y = cy + R * 0.8 * Math.sin(angleR_prime - 0.25);
        ctx.fillText("R'", labelRp_x, labelRp_y);
    }
    
    /**
     * Draws the caption text below the diagram.
     */
    function drawCaption() {
        ctx.font = "22px 'SimSun', 'Microsoft YaHei'";
        ctx.fillStyle = text_color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        const caption_text = '习题 7－62 图';
        ctx.fillText(caption_text, cx, cy + R_prime + 30);
    }

    // --- Execute Drawing ---
    drawStructure();
    drawCharges();
    drawRadiiAndLabels();
    drawCaption();

</script>

</body>
</html>